:target{#tables}

# Tables

Here's a grid table followed by a simple table:

<table>
  <thead>
    <tr>
      <td>
        Header row, column 1
        (header rows optional)
      </td>

      <td>
        Header 2
      </td>

      <td>
        Header 3
      </td>

      <td>
        Header 4
      </td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        body row 1, column 1
      </td>

      <td>
        column 2
      </td>

      <td>
        column 3
      </td>

      <td>
        column 4
      </td>
    </tr>

    <tr>
      <td>
        body row 2
      </td>

      <td colSpan={3}>
        Cells may span columns.
      </td>
    </tr>

    <tr>
      <td>
        body row 3
      </td>

      <td rowSpan={2}>
        Cells may
        span rows.
      </td>

      <td colSpan={2} rowSpan={2}>
        - Table cells
        - contain
        - body elements.
      </td>
    </tr>

    <tr>
      <td>
        body row 4
      </td>
    </tr>

    <tr>
      <td>
        body row 5
      </td>

      <td colSpan={2}>
        Cells may also be
        empty: `-->`
      </td>

      <td />
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <td colSpan={2}>
        Inputs
      </td>

      <td>
        Output
      </td>
    </tr>

    <tr>
      <td>
        A
      </td>

      <td>
        B
      </td>

      <td>
        A or B
      </td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        False
      </td>

      <td>
        False
      </td>

      <td>
        False
      </td>
    </tr>

    <tr>
      <td>
        True
      </td>

      <td>
        False
      </td>

      <td>
        True
      </td>
    </tr>

    <tr>
      <td>
        False
      </td>

      <td>
        True
      </td>

      <td>
        True
      </td>
    </tr>

    <tr>
      <td>
        True
      </td>

      <td>
        True
      </td>

      <td>
        True
      </td>
    </tr>
  </tbody>
</table>

<table id="id1">
  <caption>
    <strong>Truth table for "not"</strong>
  </caption>

  <thead>
    <tr>
      <td>
        A
      </td>

      <td>
        not A
      </td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `False`
      </td>

      <td>
        `True`
      </td>
    </tr>

    <tr>
      <td>
        `True`
      </td>

      <td>
        `False`
      </td>
    </tr>
  </tbody>
</table>

<table id="id2">
  <caption>
    Frozen Delights!
  </caption>

  <thead>
    <tr>
      <td>
        Treat
      </td>

      <td>
        Quantity
      </td>

      <td>
        Description
      </td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        Albatross
      </td>

      <td>
        2.99
      </td>

      <td>
        On a stick!
      </td>
    </tr>

    <tr>
      <td>
        Crunchy Frog
      </td>

      <td>
        1.49
      </td>

      <td>
        If we took the bones out,
        it wouldn't be crunchy, now would it?
      </td>
    </tr>

    <tr>
      <td>
        Gannet Ripple
      </td>

      <td>
        1.99
      </td>

      <td>
        On a stick!
      </td>
    </tr>
  </tbody>
</table>
